 <!-- 我的预测 - 详情内容 -->
<template>
  <div class="index">
   
    <div class="forecast-cell" style="background-color: #f9f9f9;">

      <div class="fore-name">{{forecast.title}}</div>
      <label class="fore-time">{{dateFormat(forecast.create_time)}}</label>

      <a :href="`/author?mediaId=${media.id}`" style="display:block;height:32px;">
        <label class="media_name color-blue">{{media.media_name}}</label>
        <div class="media-detail" style="display:inline;">
          <!-- <span class="hit-rate">总命中率 
           <span class="color-orange" id="hit_rate" style="font-size:12px;" v-if="media.hit_rate>0">
           {{media.hit_rate}}%</span>
           <span class="color-orange" id="hit_rate" style="font-size:12px;" v-else>
           暂无记录</span>
         </span> -->
         <span class="service-num" style="font-size:26rpx;"> 阅览人数 
          <span id="service_num" class="color-orange" style="font-size:12px;">
            {{media.service_num}}
          </span></span>
        </div>
      </a>
    </div>

    <!-- 付费前 -->
    <div class="forecast-cell">
      <div class="fore_name">付费前可看</div>
      <div class="fore-content" style="color:#444;">
        <div id="paid-before" class="content-cell">
          {{forecast.content_before_pay}}
        </div>
      </div>
    </div>
    <!-- 付费后 -->
    <div class="forecast-cell" style="background-color: #f9f9f9;">
      <div class="fore_name">付费后可看</div>
      <div class="fore-content" style="color:#555;">
        <div class="content-cell" id="paid-after" v-if="isShow">
          {{forecast.content_paid}}
        </div>
      </div>
    </div>

    <div class="fore-bottom">
      <span class="color-orange" id="recognized_num">{{forecast.recognized_num}}</span> 
    人已获取</div>

    <button class="btn-area" id="pay" v-if="btnShow" @click="buyForecast">
      打赏看号 (¥<span id="money" style="color:#fff;">{{forecast.money/100}}</span>)
      </button>

    <div class="page-bottom">
      <a href="/" class="yz-left color-blue">回首页</a>
      <a class="yz-right color-blue" id="next" :href="nextUrl">下一个</a>
    </div>
    
  </div>

</template>

<script>
import * as util from '@/utils/util'
import * as wechat from '@/utils/util.wechat'
import wx from 'weixin-js-sdk'
export default {
  data () {
    return {
      isPaying: true,
      isShow: false,
      btnShow: true,
      media: {},
      forecast: {},
      nextUrl: this.$route.fullPath
    }
  },
  methods: {
    async buyForecast (e) {
      // console.log(this)
      let _this = this

      if (this.isPaying && this.forecast.money > 0) {
        this.isPaying = false

        const param = `getUserId=${this.forecast.writer_id}&money=${this.forecast.money / 100}&forecast_id=${this.forecast.id}&media_name=${this.media.media_name}`

        const res = await util.requestApi('/lottery/api/v1/forecast_request_pay', 'get', param)

        if (res) {
          wx.chooseWXPay({
            'timestamp': res.timeStamp,
            'nonceStr': res.nonceStr,
            'package': res.package,
            'signType': 'MD5',
            'appId': util.appid,
            'paySign': res.paySign,
            success: function (res) {
              console.log(res)
        // 展示支付后结果
        // alert('展示支付后结果')
              _this.isShow = true
              _this.btnShow = false
              ++_this.forecast.recognized_num
            },
            fail: function (res) {
              _this.isPaying = true
            }
          })
        }
      }
    },
    // 用户是否购买该预测
    async payForecast () {
      const isPay = await util.requestApi('/lottery/api/v1/is_user_pay_forecast', 'get', `forecast_id=${this.$route.query.forecastId}`)

      return isPay
    },
    // 媒体号信息
    async getMediaInfo () {
      const media = await util.requestApi('/lottery/api/v1/get_media_info_by_id', 'get', `media_id=${this.$route.query.mediaId}`)

      this.media = media
    },
    // 获取预测信息
    async getForecastInfo () {
      const forecast = await util.requestApi('/lottery/api/v1/get_forecast_info', 'get', `forecast_id=${this.$route.query.forecastId}`)

      this.forecast = forecast
      if (this.forecast.money === 0) {
        this.isShow = true
        this.btnShow = false
      }
      wechat.wexinConfig(this.$route.fullPath, {
        title: this.forecast.title, // 分享标题
        link: this.$route.fullPath, // 分享链接
        imgUrl: this.media.media_image || 'http://oxg5ln7d7.bkt.clouddn.com/praise.png', // 分享图标
        desc: '椰子观点' // 分享描述
      })
      wechat.wexinIsError()
    },
    // 用户访问埋点
    createUserForecastLog () {
      util.requestApi('/lottery/api/v1/createUserForecastLog', 'get', `user_writer_id=1&media_id=1&forecast_id=${+this.$route.query.forecastId}`)
    },
    // 时间转换
    dateFormat (t) {
      return util.dateFormat(t)
    },
    updateNextUrl () {
      let index = +this.$route.query.index
      let lotteryList = JSON.parse(localStorage.lotteryList)
      console.log(lotteryList, index)
      if (index < lotteryList.length - 1) {
        this.nextUrl = `/forecast?forecastId=${lotteryList[index + 1].id}&mediaId=${lotteryList[index + 1].media_id}&index=${index + 1}`
      } else {
        this.nextUrl = `/forecast?forecastId=${lotteryList[0].id}&mediaId=${lotteryList[0].media_id}&index=0`
      }
    }
  },
  created () {
    this.updateNextUrl()
    // 获取媒体号信息
    this.getMediaInfo()
    // 获取预测信息
    this.getForecastInfo()

    // 用户是否购买
    this.payForecast()
    .then(res => {
      console.log('isPay:', res)
      this.isShow = true
      this.btnShow = false
    }).catch(err => console.error(err))
  },
  mounted () {
    setTimeout(this.createUserForecastLog(), 300)
  }
}
</script>
<style src="../style/forecast.less"></style>
